<template>
  <div class="maxBox" ref="maxBox">
    <!-- 头部 -->
    <AppHeader></AppHeader>
    <!-- tap栏 -->
    <AppTap @tapChange="tapChange" :tapData="tapData"></AppTap>
    <!-- 列表数据 -->
    <AppList :tapList="tapList"></AppList>
    <!-- 回到顶部 -->
    <div class="scrollTopTo" @click="scrollTopTo">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fspider.nosdn.127.net%2F9da39531a83546bccd92cff2502de2a7.gif&refer=http%3A%2F%2Fspider.nosdn.127.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645330897&t=fe0fb3a476fab70d77b67c1048817bff"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import AppHeader from "../components/appHeader.vue";
import AppTap from "../components/appTap.vue";
import AppList from "../components/appList.vue";
import { getTapList } from "@/netWork/api.js";
export default {
  data() {
    return {
      tapData: [
        {
          name: "全部",
          cid: "",
        },
        {
          name: "精华",
          cid: "job",
        },
        {
          name: "分享",
          cid: "share",
        },
        {
          name: "问答",
          cid: "ask",
        },
        {
          name: "招聘",
          cid: "good",
        },
        {
          name: "客户端测试",
          cid: "good",
        },
      ],
      tapList: [],
      interval: null,
      flag: true,
    };
  },
  mounted() {
    if (sessionStorage.getItem("cid")) {
      this.getTapListFn(JSON.parse(sessionStorage.getItem("cid")).cid) || [];
    } else {
      this.getTapListFn();
    }
  },
  methods: {
    getTapListFn(val) {
      getTapList(val).then((result) => {
        this.tapList = result.data;
        console.log(result);
      });
    },
    tapChange(val) {
      this.getTapListFn(val.cid);
    },
    // 回到顶部
    scrollTopTo() {
      if (this.flag) {
        this.flag = false;
        this.interval = setInterval(() => {
          if (this.$refs.maxBox.scrollTop <= 0) {
            this.flag = true;
            clearInterval(this.interval);
          } else {
            this.$refs.maxBox.scrollTop -= 30;
          }
        }, 10);
      }
    },
  },
  components: { AppHeader, AppTap, AppList },
};
</script>

<style lang="scss">
.maxBox {
  background-color: #e2e2e2;
  width: 100%;
  height: 100%;
  overflow: scroll;
  box-sizing: border-box;
  padding: 0.5rem;
}
.scrollTopTo {
  width: 50px;
  height: 140px;
  position: fixed;
  right: 1.25rem;
  bottom: 3.125rem;
  background-color: rgb(204, 115, 115);
  overflow: hidden;
  img {
    width: 100px;
    height: 200px;
    position: absolute;
    top: -40px;
    left: -25px;
  }
}
</style>
